<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <!-- 总结：
        2.4 v-for指令

    1.用于展示列表数据

    2.语法：v-for=“（item，index）” in xxx :key="yyy"

    3.可遍历：数组（用的多）、对象、字符串（用的少）、指定次数（用的少） -->
</head>

<body>
    <div id="app">
        <!-- 遍历数组（使用次数多） -->
        <h2>人员列表</h2>
        <ul>
            <li v-for="(p,index) in persons" :key="index">{{p.name}}-{{p.age}}-{{index}}</li>
        </ul>
        <!-- 遍历对象 -->
        <h2>汽车列表</h2>
        <ul>
            <li v-for="(a,b) in car">
                {{b}}--{{a}}
            </li>
        </ul>
        <!-- 遍历字符串 （使用次数少）-->
        <h2>测试遍历字符串</h2>
        <ul>
            <li v-for="(char,index) in str">
                {{index}}--{{char}}
            </li>
        </ul>
        <!-- 测试遍历指定次数（使用次数少） -->
        <h2>测试遍历指定次数</h2>
        <ul>
            <li v-for="(number,index) in 8">
                {{index}}--{{number}}
            </li>
        </ul>
    </div>
    <script>
        Vue.config.productionTip = false
        var v = new Vue({
            el: '#app',
            data: {
                persons: [{
                        id: '001',
                        name: "张三",
                        age: 18
                    },
                    {
                        id: '002',
                        name: "李四",
                        age: 19
                    },
                    {
                        id: '003',
                        name: "王五",
                        age: 20
                    },
                    {
                        id: '003',
                        name: "王五",
                        age: 20
                    }
                ],
                car: {
                    name: "广汽",
                    age: 2,
                    price: '18万'
                },
                str: 'hello'
            },
            methods: {}
        })
    </script>
</body>

</html>